/**
 * 响应式尺寸转换工具
 * 提供将固定尺寸转换为响应式尺寸的通用方法
 */

/**
 * 将固定尺寸转换为响应式值
 * @param {number} fixedWidth - 固定宽度（像素）
 * @param {number} fixedHeight - 固定高度（像素）
 * @param {number} baseScreenWidth - 基准屏幕宽度，默认3840（2倍图基准）
 * @param {number} baseScreenHeight - 基准屏幕高度，默认2160（2倍图基准）
 * @returns {object} 包含响应式宽度和高度的对象 {width: 'xxvw', height: 'xxvh'}
 */
export const convertToResponsive = (fixedWidth, fixedHeight, baseScreenWidth = 3840, baseScreenHeight = 2160) => {
  // 计算vw值：固定宽度 / 基准屏幕宽度 * 100
  const vwValue = (fixedWidth / baseScreenWidth) * 100
  // 计算vh值：固定高度 / 基准屏幕高度 * 100
  const vhValue = (fixedHeight / baseScreenHeight) * 100
  
  return {
    width: `${vwValue.toFixed(2)}vw`,
    height: `${vhValue.toFixed(2)}vh`
  }
}

/**
 * 将vw/vh值转换为实际像素值
 * @param {string} width - 宽度值，如'80vw'
 * @param {string} height - 高度值，如'60vh'
 * @returns {object} 包含实际像素宽度和高度的对象 {width: number, height: number}
 */
export const responsiveToPixels = (width, height) => {
  // 获取视口尺寸
  const viewportWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  
  // 提取数值部分
  const widthValue = parseFloat(width)
  const heightValue = parseFloat(height)
  
  // 计算实际像素值
  const actualWidth = (viewportWidth * widthValue) / 100
  const actualHeight = (viewportHeight * heightValue) / 100
  
  return {
    width: actualWidth,
    height: actualHeight
  }
}